<template>
  <view class="custom-step">
    <step-bar/>
    <view class="stop-content">
      <slot/>
    </view>
    <step-option/>
  </view>
</template>

<script lang="ts" setup>
import {ref, withDefaults, defineProps, provide, watch} from 'vue'
import StepBar from './bar.vue'
import StepOption from './option.vue'
import type {Item, StepContext} from "@/components/Step/type";
import type {Color} from "@/types/code";
import type {ItemProps} from "@/components/Step/item.vue";

export interface IStepProps{
  current: number
  barColor?: Color
  activeBarColor?: Color
  titleColor?: Color
}
const props = withDefaults(defineProps<IStepProps>(),{
  current: 0,
  barColor: '#efefef',
  activeBarColor: '#3c9cff',
  titleColor: '#000'
})
const emits = defineEmits(['lastStep','nextStep','finish'])
// 当前步骤序号
const currentIndex = ref<number>(props.current)
watch(() => props.current,(newVal,oldVal) => {
  if(newVal !== oldVal){
    currentIndex.value = newVal
  }
})

const itemList = ref<Item[]>([])
const fnRegisterItem = (item: ItemProps): number => {
  itemList.value.push({
    id:itemList.value.length === 0 ? 0 : itemList.value[itemList.value.length - 1].id + 1,
    ...item
  })
  return itemList.value.length - 1
}
const fnUnRegisterItem = (id: number) => {
  itemList.value.splice(itemList.value.findIndex(item => item.id === id),1)
}
// 上一步
const fnLastStep = () => {
  currentIndex.value > 0 && currentIndex.value --
  emits('lastStep',currentIndex.value)
}
// 下一步
const fnNextStep = () => {
  currentIndex.value < itemList.value.length - 1 && currentIndex.value ++
  emits('nextStep',currentIndex.value)
}
const fnFinish = () =>{
  emits('finish')
}
provide<StepContext>('StepContext',{
  props,
  currentIndex,
  itemList,
  fnRegisterItem,
  fnUnRegisterItem,
  fnLastStep,
  fnNextStep,
  fnFinish
})
</script>

<style scoped lang="scss">
.custom-step{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  .stop-content{
    flex: 1;
  }
}
</style>